<template>
  <div class="bottom">
    <section>
      <h4>作者信息</h4>
      <p>热爱前端开发, 微信号与个人站地址如下</p>
      <p class="wx">微信：hunshidamowangzhaoyu</p>
      <a href="https://baidu.com">个人站：https://baidu.com</a>
    </section>
    <ul>
      <h4>商品目录</h4>

      <router-link to="/product">
        <li
          v-for="item in this.$store.state.nav"
          :key="item.id"
          @click="typeHandle(item.value)"
        >
          {{ item.value }}
        </li>
      </router-link>
    </ul>
    <div class="rightcopy">
      ©本站为朝羽2022年浙大宁波理工学院的毕业设计作品，保留一切权利
    </div>
  </div>
</template>

<script>
export default {
  name: "bottomInfo",
  methods: {
    // 切换类型，以达到改变商品列表的目的
    typeHandle(type) {
      this.$store.state.typeFilter.type = type;
      this.$store.dispatch("updateShowProductList");
    },
  }, // methods
};
</script>

<style lang="scss" scoped>
.bottom {
  width: 100%;
  float: left;
  text-align: left;
  margin-top: 50px;
  cursor: default;
  h4 {
    font-size: 1.1rem;
    letter-spacing: 0.3rem;
    margin-bottom: 30px;
  }
  section {
    width: 42%;
    float: left;
    p {
      font-size: 0.6rem;
      letter-spacing: 0.1rem;
    }
    .wx,
    a {
      font-size: 0.7rem;
      letter-spacing: 0.05rem;
      margin-top: 10px;
      font-weight: 600;
    }
    a {
      text-decoration: none;
      color: #63af8c;
      display: block;
      margin-top: 40px;
    }
  }
  ul {
    list-style: none;
    width: 50%;
    float: left;
    li:before {
      content: "";
      width: 0.8rem;
      height: 2px;
      display: block;
      transform: translateY(300%);
      position: absolute;
      background: #dadada;
    }
    li {
      height: 35px;
      width: 100%;
      position: relative;
      text-indent: 1.3rem;
      transition: 0.4s;
      font-size: 0.8rem;
      cursor: pointer;
    }
    li:hover {
      opacity: 0.7;
    }
  }
  .rightcopy {
    float: left;
    width: 100%;
    height: 20px;
    margin: 150px 0 50px 0;
    font-size: 0.5rem;
    letter-spacing: 0.1rem;
  }
}
</style>